<template>
  <div class="order-item">
    <el-image :src="require('@/assets/index/工单.png')"></el-image>
    <div class="item">
      <div>
        <span class="digital">{{ total === '' ? '-' : total }}</span>
      </div>
      <div>本月总工单</div>
    </div>
    <div class="item">
      <div>
        <span class="digital">{{ finished === '' ? '-' : finished }}</span>
      </div>
      <div>本月已完成</div>
    </div>
    <div class="item">
      <div>
        <span class="digital">{{ percent || '-' }}</span>
      </div>
      <div>完成率</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderItem",
  props: {
    total: {
      type: [String, Number],
      required: true
    },
    finished: {
      type: [String, Number],
      required: true
    },
    percent: {
      type: [String],
      required: true
    }
  }
};
</script>

<style lang="scss" scoped>
.order-item {
  padding: 8px;
  background: #ecf2f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  .item {
    flex: 1;
    text-align: center;
    .digital {
      color: #308ae7;
      font-size: 24px;
    }
  }
}
</style>
